<html>
<head>
    <title>Timeline JSON data</title>

    <style type="text/css">
        body {
            font-size: 10pt;
            font-family: verdana, sans, arial, sans-serif;
        }
    </style>

    <script type="text/javascript" src="js/timeline.js"></script>
    <link rel="stylesheet" type="text/css" href="css/timeline.css">
    <link rel="stylesheet" type="text/css" href="css/views.css" />
	<link rel="stylesheet" type="text/css" href="css/form.css" />

    <script type="text/javascript">
        var timeline;
        var data;

        // Called when the Visualization API is loaded.
        function drawVisualization() {
        	
        	/*Get the JSON of the current user's timeline*/
        	var xhr = new XMLHttpRequest(); 
        	xhr.open("GET", "../TimelineServlet", true); 
        	
        	var json;
        	var jsonLength; 
        	
        	// Create a JSON data table 
          	data = []; 
        	
        	/*Populate the timeline with the JSON file.*/
       		xhr.onreadystatechange = function()
       		{
	       		if(xhr.readyState == 4 && xhr.status == 200)
	       		{
	       			json = JSON.parse(xhr.responseText);
	       			jsonLength = json.data.length; 
	       			
	       			for(i=0; i<jsonLength; i++)
	       			{
	       				if(json.data[i].start == json.data[i].end)
	       				{
	       					data.push( {
	            	    			'start': new Date(json.data[i].start),
	               	             	'content': json.data[i].content,
	       				 	})
	       				}
	            	    else
	            	    {	
	            	    	data.push( {
	            	    			'start': new Date(json.data[i].start),
	               	             	'content': json.data[i].content,
	               	                'end': new Date(json.data[i].end),
	            	    		}) 
	            	   
	       				}
	       			}
	       			
	       			// Instantiate timeline object.
	                timeline = new links.Timeline(document.getElementById('mytimeline'), options);
	                
	             	// Draw timeline with the created data and options
	       			timeline.draw(data);
	       		}
       		}
       		
       		xhr.send(); 
        	
            
            // specify options
            var options = {
                'width':  '100%',
                'height': '600px',
                'editable': true,
                'style': 'box'
            };

            /*If we want to see every action on the timeline by the user*/
            function onRangeChanged(properties) 
            {
				console.log(properties);
            	//                document.getElementById('info').innerHTML += 'rangechanged ' +
//                        properties.start + ' - ' + properties.end + '<br>';
            }

            // attach an event listener using the links events handler
            //links.events.addListener(timeline, 'rangechanged', onRangeChanged);

            
            
        }
    </script>
</head>

<body onload="drawVisualization();">
<h1 style="color:#1BB3C4;">My timeline</h1>

<div id="mytimeline"></div>

</body>
</html>
